function updataPlateCover() {
    // 获得滑块元素
    let slider = document.querySelector(".inputRange input");

    // 获取覆盖元素
    let cover = document.querySelector(".dataPlate .progress");

    slider?.addEventListener("input", (event) => {
        if(event.target == null || cover == null) {
            return false;
        }
        // @ts-ignore
        const progress = 20 + (320 * (event.target.value / 100));
        // @ts-ignore
        cover.style.background =
        `
            conic-gradient(
            from ${progress}deg,
            var(--trackColor) var(--start),
            var(--coverColor) var(--progress) calc(var(--progress) + var(--progressLeng)),
            var(--trackColor) calc(var(--start) + var(--startLeng))
        `
        ;
    })
}

updataPlateCover();

// 获取盘元素
const dataPlatePlate = document.querySelector(".dataPlate .plate");

// 获得滑块元素
const dataPlateSlider = document.querySelector(".inputRange input");
// 最低频率
const dataPlateMinFreq = 0;
// 区间
const dataPlateFreqLen = 1000;

function calcFreq() {
    // @ts-ignore
    let data = (dataPlateMinFreq + dataPlateFreqLen * (dataPlateSlider.value / 100)).toFixed(1);
    // @ts-ignore
    dataPlatePlate.setAttribute("dataFoo", String(data) + " Hz");
}

function updataPlateData() {
    calcFreq();
    dataPlateSlider?.addEventListener("input", (event) => {
        if(event.target == null || dataPlatePlate == null) {
            return false;
        }
        calcFreq();
    });
}

updataPlateData();